<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>登录页面</title>

    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">

    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/style.css" rel="stylesheet">


  </head>
  <body>

   <div class="container-fluid">
	<div class="row row-margin-top">
		<div class="col-md-12 col-margin-top">
			<h3 class="text-center text-info">
				科研管理系统
			</h3>
			<div class="carousel slide col-margin-top" id="carousel-407570">
				<ol class="carousel-indicators">
					<li data-slide-to="0" data-target="#carousel-407570" class="active">
					</li>
					<li data-slide-to="1" data-target="#carousel-407570">
					</li>
					<li data-slide-to="2" data-target="#carousel-407570">
					</li>
				</ol>
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img class="d-block w-100" alt="Carousel Bootstrap First" src="https://www.layoutit.com/img/sports-q-c-1600-500-1.jpg" />
						<div class="carousel-caption">
							<h4>
								最新项目
							</h4>
							<p>
								项目1
							</p>
						</div>
					</div>
					<div class="carousel-item">
						<img class="d-block w-100" alt="Carousel Bootstrap Second" src="https://www.layoutit.com/img/sports-q-c-1600-500-2.jpg" />
						<div class="carousel-caption">
							<h4>
								项目2
							</h4>
							<p>
								项目3
							</p>
						</div>
					</div>
					<div class="carousel-item">
						<img class="d-block w-100" alt="Carousel Bootstrap Third" src="https://www.layoutit.com/img/sports-q-c-1600-500-3.jpg" />
						<div class="carousel-caption">
							<h4>
								Third Thumbnail label
							</h4>
							<p>
								Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
							</p>
						</div>
					</div>
				</div> <a class="carousel-control-prev" href="#carousel-407570" data-slide="prev"><span class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" href="#carousel-407570" data-slide="next"><span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
			</div>
		</div>
	</div>
	<div class="row row-margin-top">
		<div class="col-md-4 col-margin-top">
			<dl>
				<dt>
					项目信息列表
				</dt>
				<dd>
					mies
				</dd>
				<dt>
					mes2
				</dt>
				<dd>
					mes2
				</dd>
				<dd>
					mes3
				</dd>
				<dt>
					mes4
				</dt>
				<dd>
					mes5
				</dd>
				<dt>
					mes5
				</dt>
				<dd>
					mes6
				</dd>
			</dl>
		</div>
		<div class="col-md-4 col-margin-top">
			<form role="form" id="loginForm" method="post" onsubmit="return login()">
				<div class="form-group">
					 
					<label for="username">
						账号
					</label>
					<input type="text" class="form-control" id="username" name="username" />
				</div>
				<div class="form-group">
					 
					<label for="password">
						密码
					</label>
					<input type="password" class="form-control" id="password" name="password"/>
				</div>
				<div class="checkbox">
					 
					<label>
						<input type="checkbox" /> Check me out
					</label>
				</div> 
				<button type="submit" class="btn btn-primary" onclick="check()">
					登录
				</button>
			</form>
			 <a id="modal-394224" href="#modal-container-394224" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
			
		</div>
		<div class="col-md-4 col-margin-top">
		</div>
	</div>
</div>

    <script src="../static/js/jquery.min.js"></script>
   <script src="../static/js/popper.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/scripts.js"></script>

  	<script type="text/javascript">
		// 直接以表单提交，这种还有直接的表单提交都是可以接收到的
	function login(){
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/login",
            data: $('#loginForm').serialize(),
            success: function (result) {
                if (result && result.success) {
                    window.location.href = "/index";
                } else {
                    alert(result.msg);
                }
            }
        });
	    return false;
	}
	function check(){
	    var username = $('#username').val();
		var password = $('#password').val();
		if(username.length>13||username.length<3){
            alert(账号应该在3到13位的长度之间)
            //todo 账号密码格式的验证
            return false;
		}
	}
	</script>
  </body>
</html>